<template>
  <div class="returnee">
    <div class="dynamic-search">
      <search-form>
        <template v-slot:bossLogo>
          <div class="logo">
          </div>
        </template>
        <template v-slot:searchBtn>
          <button class="search"  @click="toJobPage">
            搜索
          </button>
        </template>
      </search-form>
    </div>
    <returnee-banner></returnee-banner>
    <returnee-body></returnee-body>
  </div>
</template>
<script>
// 引入banner
import ReturneeBanner from '@/components/returnee/banner.vue';
// 引入内容主体部分
import ReturneeBody from './returneeBody.vue';
// 引入搜索框组件
import SearchForm from '@/components/returnee/searchForm.vue'
export default {
  name: 'InRt',
  components: {
    ReturneeBanner,
    ReturneeBody,
    SearchForm
  },
  data() {
    return {
      documentEle: "",
      dynamicSearch: ""
    }
  },
  methods: {
    toJobPage(){
      this.$router.push({
        path: "position",
        query: {
          searchCondition: 1
        }
      });
    }
  },
  mounted() {
    this.documentEle =  document.documentElement;
    this.dynamicSearch = document.querySelector(".dynamic-search");
    const that = this;
    window.addEventListener('scroll',function(){
      if(that.documentEle.scrollTop >= 420){
        that.dynamicSearch.style.display = "block"
      }
      else{
        that.dynamicSearch.style.display = "none"
      }
    });
  }
}
</script>
<style lang="less">
  .returnee{
    .dynamic-search{
      width: 100%;
      height: 60px;
      background-color: #fff;
      position: fixed;
      top: 0;
      z-index: 1;
      display: none;
      box-shadow: 0 1px 20px 2px #7e7e7e;
      box-sizing: border-box;
      padding-left: 100px;
    }
    .logo{
      width: 110px;
      height: 20px;
      background: transparent;
      flex-shrink: 0;
      background-image: url("https://static.zhipin.com/zhipin-geek/v539/web/geek/images/logo-2x.png");
      background-size: 110px 20px;
      background-repeat: no-repeat;
    }
  }
</style>